<template>
	<view class="container_wrap">
		<wd-toast />
		<wd-form ref="form" :model="model">
			<wd-cell-group border>
				<wd-input label="账号" label-width="100px" prop="value1" clearable v-model="model.value1"
					placeholder="请输入账号" :rules="[{ required: true, message: '请填写账号' }]" />
				<wd-input label="密码" label-width="100px" prop="value2" show-password clearable v-model="model.value2"
					placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
			</wd-cell-group>
			<view class="footer">
				<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
			</view>
		</wd-form>
	</view>
</template>


<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { useToast } from '@/uni_modules/wot-design-uni'
	const toast = useToast()

	const model = reactive<{
		value1 : string
		value2 : string
	}>({
		value1: '',
		value2: ''
	})

	const form = ref()

	function handleSubmit() {
		form.value
			.validate()
			.then(({ valid, errors }) => {
				if (valid) {
					toast.success('提交成功')
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
</script>

<style lang="scss" scoped>
	.footer {
		padding: 12px;
	}
</style>
